<template>
  <a-modal v-model:open="open2" :title="node.string" width="600px">
    <a-form>
      <template v-for="item in sheet || {}" :key="item.nodename">
        <TagNode :node="item" :form-info="formInfo" />
      </template>
    </a-form>

    <template #footer>
      <a-space v-if="readonly">
        <a-button size="small" key="back" @click="open2 = false">
          关闭
        </a-button>
      </a-space>

      <a-space v-else>
        <a-button size="small" key="rollback" @click="open2 = false">
          取消
        </a-button>

        <a-button size="small" key="remove" @click="onRemove"> 移出 </a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
import TagNode from '../ONode/TagNode.vue'

import { useSubForm } from './subFormApi.js'

import { computed } from 'vue'

const props = defineProps(['open', 'readonly', 'record', 'node', 'parentInfo'])
const emit = defineEmits(['update:open', 'row-commit', 'row-remove'])

const { formview, sheet } = useSubForm(props)

const open2 = computed({
  get() {
    return props.open
  },
  set(val) {
    emit('update:open', val)
  }
})

const formInfo = computed(() => {
  if (!formview.value) {
    return {}
  }

  const view = formview.value

  const info = {
    model: view.model,
    metadata: view.metadata,
    record: props.record,
    values: {},
    editable: false
  }
  return { ...info }
})

function onRemove() {
  // console.log('onRemove')
  emit('row-remove')
  open2.value = false
}
</script>

<style scoped></style>
